<template>
  <div class="music-list">
        <header-title :title="fmtSinger && fmtSinger.name" @action="() => $router.back()">
            <i class="icon-back"></i>
        </header-title>
        <!-- <div class="goback" @click="() => $router.back()">
            <i class="icon-back"></i>
        </div>
        <div class="header-title">{{fmtSinger && fmtSinger.name}}</div> -->
        <div
            class="bg-img"
            ref="bgImg"
            :style="bgImgStyle"
        >
            <div
                class="filter"
                :style="filterStyle"
            ></div>
            <div class="random-play">
                <div
                    class="random-play-box"
                    @click="randomPlay"
                >
                    <i class="icon-play" data-v-0f0ef757=""></i>
                    <span class="text">随机播放全部</span>
                </div>
            </div>
        </div>
        <main
            class="list-box"
            :style="mainStyle"
            v-loading="loading"
            v-no-result:[resultText]="noResult"
        >
            <Scroll
                @scroll="scroll"
                :probeType="3"
            >
                <song-list :songs="songs" @select="select"></song-list>
            </Scroll>
        </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, reactive, ref, onBeforeMount, computed } from 'vue'
import { SongProp, StateProp } from '@/store/type'
import SongList from '@/components/song-list/index.vue'
import Scroll from '@/components/base/scroll/index.vue'
import HeaderTitle from '@/components/base/header-title/index.vue'
import { SongProps } from '@/views/song/index.vue'
import { getSingerDetail, getSongsUrl } from '@/service/singer'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const MIN_RESIDUE_HEIGHT = 40 // 最小剩余高度
let MAX_SCROLL_HEIGHT: number// 最大滚动距离
export default defineComponent({
    props: {
        singer: {
            type: Object as PropType<SongProp>,
            default: () => null
        }
    },
    components: {
        SongList,
        Scroll,
        HeaderTitle
    },
    setup (props) {
        const store = useStore<StateProp>()
        const router = useRouter()
        const route = useRoute()
        const fmtSinger = computed(() => {
            let ref: SongProp | null = props.singer
            if (!ref) {
                ref = store.state.song
            }
            return ref
        })
        const bgImg = ref<null | HTMLElement>(null)
        const mainStyle = reactive<{ top?: string }>({})
        const bgImgStyle = reactive<{ zIndex?: string, transform?: string, height?: string, paddingTop?: string, backgroundImage:string}>({
            backgroundImage: `url(${fmtSinger.value && fmtSinger.value.pic})`
        })
        const filterStyle = reactive<{ backdropFilter?: string, filter?: string }>({})
        const songs = ref<SongProp[]>([])
        const loading = ref<boolean>(false)
        const noResult = computed(() => !loading.value && songs.value.length <= 0)
        onBeforeMount(async () => {
            if ((fmtSinger.value && fmtSinger.value.mid) !== route.params.id) {
                return router.push({ path: route.matched[0].path })
            }
            loading.value = true
            const { songs: songList } = await getSingerDetail(fmtSinger.value as SongProp)
            const song = await getSongsUrl(songList as SongProps[])
            songs.value = song
            loading.value = false
        })
        onMounted(() => {
            if (bgImg.value !== null) {
                const bgImgHeight = bgImg.value.offsetHeight // 背景图的高度
                mainStyle.top = bgImgHeight + 'px'
                MAX_SCROLL_HEIGHT = bgImgHeight - MIN_RESIDUE_HEIGHT
            }
        })
        const scroll = ({ y }: {x: number, y: number}) => {
            // console.log(-y)
            if (-y >= MAX_SCROLL_HEIGHT) {
                bgImgStyle.zIndex = '10'
                bgImgStyle.transform = 'translateZ(10px)'
                bgImgStyle.height = `${MIN_RESIDUE_HEIGHT}px`
                bgImgStyle.paddingTop = '0'
            } else {
                bgImgStyle.zIndex = '0'
                bgImgStyle.transform = 'translateZ(0)'
                bgImgStyle.height = '0'
                bgImgStyle.paddingTop = '70%'
            }
            // 设置背景图的缩放
            let scale = 1 // 定义缩放初始值
            if (y > 0) { // 向下拉，实现图片放大效果
                scale = scale + Math.abs(y / (MAX_SCROLL_HEIGHT + MIN_RESIDUE_HEIGHT))
                bgImgStyle.transform = `${bgImgStyle.transform} scale(${scale})`
            }
            // 设置背景图的模糊效果
            const blur = Math.min(20, -y * 20 / MAX_SCROLL_HEIGHT)
            filterStyle.backdropFilter = `blur(${blur}px)`
        }
        // song-list 点击歌曲，将点击的歌曲信息保存到store中
        const select = (index: number) => {
            store.dispatch('selectSong', { index, list: songs.value })
        }
        // 点击随机播放按钮，将点击的歌曲信息保存到store中
        const randomPlay = () => {
            store.dispatch('shuffleSong', songs.value)
        }
        return {
            scroll,
            bgImg,
            mainStyle,
            bgImgStyle,
            filterStyle,
            songs,
            fmtSinger,
            loading,
            noResult,
            resultText: '暂无可以播放的歌曲',
            select,
            randomPlay
        }
    }
})
</script>

<style lang="scss">
.music-list {
    position: relative;
    height: 100%;
    .bg-img {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        padding-top: 70%;
        background-size: cover;
        transform-origin: top;
        .filter {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .4);
        }
        .random-play {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 40px;
            display: flex;
            justify-content: center;
            .random-play-box {
                height: 32px;
                line-height: 32px;
                padding: 0 20px;
                border: 1px solid #ffcd32;
                border-radius: 32px;
                color: #ffcd32;
                display: flex;
                align-items: center;
                i {
                    margin-right: 10px;
                }
                span {
                    font-size: 12px;
                }
            }
        }
    }
    .list-box {
        position: absolute;
        left: 0;
        top: 33%;
        right: 0;
        bottom: 0;
    }
}
</style>
